import { useState, useRef } from 'react'

function GetDOM() {
	const [iptvalue, setIptvalue] = useState('')
	const inputRef = useRef(null) // 此方法只能拿到原生dom对象，拿不到子组件的dom对象，需和 forwardRef 和 useImperativeHandle 属性配合使用。

	const showDOM = () => {
		console.dir(inputRef.current)
	}

	return (
		<>
			{/* 非受控表单 */}
			<input type="text" ref={inputRef} onChange={() => setIptvalue(inputRef.current.value)} />
			<p>当前输入值：{iptvalue}</p>
			<button onClick={showDOM}>获取DOM</button>
		</>
	)
}

export default GetDOM
